<template>
  <div class="student">
      <h1>{{msg}}</h1>
      <h2>学生姓名：{{name}}</h2>
      <h2>学生性别：{{sex}}</h2>
      <h2>学生年纪：{{myAge}}</h2>
      <button @click="addAge">点击年纪+1</button>
  </div>
</template>

<script>
  /**
   * 配置项props
      功能:让组件按收外部传过来的数据
          (1).传递数据:
              <Demo name="xxx"/>
          (2).接收数据:
              第一种方式(只按收):
                props: ['name" ]
              第二种方式(限制类型):
                  props:{
                    name:String
                  }
              第三种方式(限制类型、限制必要性、指定默认值):
                props:{
                  name:{
                    type:string，//类型
                    required:true，//必要性
                    default:'老王’//默认值
                  }
                }
          备注:props是只读的，Vue底层会监测你对props的修改，如果进行了修改，就会发出警告，若业务需求确实需要修改，那么请复制props的内容到data中一份，然后去修改data中
      的数据。
  */
export default {
  name: 'Student',
  props:['name','sex','age'],//简单声明接受
  // props:{
  //   name:String,
  //   sex:String,
  //   age:Number
  // },//接受的同时，对类型进行限制
  // props:{
  //   name:{
  //     type:String,
  //     required:true //name是必须的
  //   },
  //   sex:{
  //     type:String,
  //     required:true
  //   },
  //   age:{
  //     type:Number,
  //     default:99 //默认值。和required不会同时出现
  //   }
  // },//接受的同时对数据进行类型显示+默认值的指定+必要性的限制
  data() {
    return {
      msg:"富婆名单",
      myAge:this.age
    }
  },
  methods: {
    addAge(){
      this.myAge++
    }
  },
}
</script>

<style scoped>
  .student{
    background-color: gray;
  }
</style>
